<script>
    var lists = '{$lists}';
</script>
<style>
    .form-group .json_list,
    .answer {
        display: flex;
    }

    .question .json_left {
        width: 93%;
        padding-right: 5px;
    }

    .component .control-label {
        color: #e74c3c;
    }

    [v-clock] {
        display: none;
    }
</style>
<div>
    <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Select component')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-component_id" data-rule="required" data-source="mental/component/index" data-params='{}' class="form-control selectpage" data-multiple="true" name="row[component_id]" type="text" value="{$component_ids}">
            </div>
        </div>
        <div id="app">
            <div v-for="(item,index) in list" :key="index" v-clock>
                <div class="form-group component">
                    <label class="control-label col-xs-12 col-sm-2" v-text="item.title+'：'"></label>
                    <a href="javascript:;" class="btn btn-success btn-add-freight" @click="selectQuestion(index)">
                        <i class="fa fa-map-marker"></i>
                        {:__('选择问题')}
                    </a>
                    <!--<a href="javascript:;" class="btn btn-success btn-add-freight">
                        <i class="fa fa-map-marker"></i>
                        {:__('添加问题')}
                    </a> -->
                </div>

                <div class="form-group question" v-for="(it,ik) in item.question" :key="ik">
                    <label class="control-label col-xs-12 col-sm-2">{{ik+1}}、</label>
                    <div class="col-xs-12 col-sm-8">
                        <div class="json_list">
                            <div class="json_left">
                                <div class="question">
                                    <input type="text" class="form-control" :value="it.title" readonly="" id="N253548128323">
                                    <input type="hidden" :name="'row['+index+'][question_id][]'" :value="it.id">
                                </div>
                            </div>
                            <div>
                                <span class="btn btn-sm btn-danger btn-remove" data-question="15" @click="remove(index,ik)">
                                    <i class="fa fa-times"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2"></label>
                    <div class="col-sm-8 col-xs-12">
                        <label>
                            <input id="" :name="'row['+index+'][type]'" type="radio" :checked="item.type==1" value="1" data-tip="">
                            求和
                        </label>
                        <label>
                            <input id="" :name="'row['+index+'][type]'" type="radio" :checked="item.type==2" value="2" data-tip="">
                            求平均分
                        </label>
                    </div>
                </div>
                <!-- ****** -->
                <div class="form-group row">
                    <label class="control-label col-xs-12 col-sm-2">{:__('Result')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <dl class="fieldlist" data-template="content_tpl">
                            <dd class="form-inline question json_list" v-for="(rit,rid) in item.result" :key="rid">
                                <div class="json_left">
                                    <input type="text" style="width:70%;" :name="'row['+index+'][result]['+rid+'][title]'" class="form-control" v-model="rit.title" placeholder="标题" data-toggle="tooltip" data-placement="bottom" title="结果标题">
                                    <input type="text" :name="'row['+index+'][result]['+rid+'][left]'" class="form-control" v-model="rit.left" placeholder="左区间分数" size="6" data-toggle="tooltip" data-placement="bottom" title="左区间分数">
                                    <input type="text" :name="'row['+index+'][result]['+rid+'][right]'" class="form-control" v-model="rit.right" placeholder="右区间分数" size="6" data-toggle="tooltip" data-placement="bottom" title="右区间分数">
                                    <textarea :name="'row['+index+'][result]['+rid+'][content]'" class="form-control" cols="94" rows="3" style="margin-top:10px;vertical-align: top;" data-toggle="tooltip" data-placement="bottom" title="结果内容">{{rit.content}}</textarea>
                                </div>
                                <div style="line-height: 105px;">
                                    <span class="btn btn-sm btn-danger btn-remove" @click="removeResult(index,rid)">
                                        <i class="fa fa-times"></i>
                                    </span>
                                </div>
                            </dd>
                            <dd>
                                <a href="javascript:;" class="btn btn-sm btn-success btn-append" @click="addResult(index)">
                                    <i class="fa fa-plus"></i>
                                    {:__('Append')}
                                </a>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group layer-footer">
            <label class="control-label col-xs-12 col-sm-2"></label>
            <div class="col-xs-12 col-sm-8">
                <button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button>
                <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
            </div>
        </div>

    </form>
</div>